<template>
    <div class="comp-navbar">
        <!-- 占位栏 -->
        <!-- 导航栏主体 -->
        <div class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">
            <!-- 状态栏 -->
            <div class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></div>
            <!-- 标题栏 -->
            <div class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">
                <!-- home及后退键 -->
                <div class="bar-options">
                    <p class="user" @click="getUserImg">
                        <img mode="widthFix" :src="tx_img" alt="">
                    </p>
                </div>
                <!-- 标题 -->
                <div class="bar-title" :style="[{color:titleColor}]">{{title}}</div>
            </div>
        </div>
    </div>
</template>

<script>
// import { setusrInfo,getusrInfo } from "@/utils/auth";
export default {
    props: {
        // 导航栏背景色
        navBackgroundColor: {
            default: ""
        },
        // 标题颜色
        titleColor: {
            default: ""
        },
        //标题文字
        title: {
            required: false,
            default: ""
        },
        // 是否显示后退按钮
        backVisible: {
            required: false,
            default: false
        },
        // home按钮的路径
        homePath: {
            required: false,
            default: ""
        }
    },
    data() {
        return {
            statusBarHeight: "", // 状态栏高度
            titleBarHeight: "", // 标题栏高度
            navBarHeight: "", // 导航栏总高度
            platform: "",
            model: "",
            brand: "",
            system: "",
            tx_img:'/static/images/tx.png'
        };
    },
    beforeMount() {
        const self = this;
        wx.getSystemInfo({
            success(system) {
                console.log(`system:`, system);
                self.statusBarHeight = system.statusBarHeight;
                self.platform = system.platform;
                self.model = system.model;
                self.brand = system.brand;
                self.system = system.system;

                let platformReg = /ios/i;
                if (platformReg.test(system.platform)) {
                    self.titleBarHeight = 44;
                } else {
                    self.titleBarHeight = 48;
                }

                self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
            }
        });
    },
    mounted() {
        console.log(getusrInfo())
        let txData = getusrInfo()
        if(getusrInfo()){
            this.tx_img = txData.avatarUrl
        }
    },
    methods: {
        //获取头像
        getUserImg(){
            if(!getusrInfo()){
                wx.getUserProfile({
                    lang:'zh_CN',
                    desc:'展示用户信息',
                    success:(res)=>{
                        console.log(res)
                        this.tx_img = res.userInfo.avatarUrl
                        setusrInfo(res.userInfo)
                    },
                })
            }
        }
    }
};
</script>

<style scoped>
.comp-navbar {
    width: 100vw;
}
.nav-titlebar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
}
.bar-options {
    width: 500rpx;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    position: absolute;
    left: 30rpx;
    display: flex;
    align-items: center;
    padding-right: 5rpx;
}
.bar-options .user{
    width: 60rpx;
    height: 60rpx;
}
.bar-options .user img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.bar-title {
    width: 45%;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
</style>
